<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#id1{
			width: 300px;
			height:300px;
			background-color: red;
		}
		</style>
		
		<!-- 	1.按钮和DIV的单击事件（三种绑定方式）
			2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
			3.登入页面
			用户名输入框，
			密码输入框，
			提交按钮
			
			任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
			         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
			         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
			         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
			         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
			              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
			4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
	</head>

	<body>
		<div id="id1" onmouseenter="enterdiv();" onmouseleave="leavediv();" onmousemove="movediv()"> </div>
		</br>
		
		
		
		登陆页面
		</br>
		用户名：<input type="text" id="username" onblur="leaveUserNameinput();" /></br>
		密码：<input type="password" id="PWD" onfocus="focuspwd();" onblur="leavePWDinput();"/></br>
		<button id="button1" onclick="onclick1()" >提交</button></br>
		
		<button type="button" id="button2">这是一个普普通通的button</button>
		<button type="button" id="button3" onclick="onclick3()">给这个button加上点东西</button>
		<button type="button" id="button4" onclick="onclick4()">让button再次普通</button>
	</body>
	
	
	
	<script>
	function enterdiv(){
		console.log('进入div');
	};
	
	function leavediv(){ 
		leavediv_();
	};
	function leavediv_(){
		console.log('离开div');
	};
	
	movediv= function (){
		console.log('已移动div');
	};
	
	
	function leaveUserNameinput(){
		if(document.getElementById('username').value== '')
		{
			alert('用户名不能为空');
		}
	};
	
	function focuspwd(){
		console.log('用户正在输入密码');
	};
	
	 function leavePWDinput(){
		 if(document.getElementById('PWD').value==''){
			 alert('没有输入密码');
		 }
	 };
	 
	 function onclick1(){
		 if(document.getElementById('username').value=='' && document.getElementById('PWD').value==''){
			 alert('用户名和密码为空');
		 }else if(document.getElementById('username').value==''){
			 alert('用户名为空');
		 }else if(document.getElementById('PWD').value==''){
			 alert('密码为空');
		 }else{
			 alert('登陆成功');
		 }
	 };
	 
	 function onclick2(){
		 alert('监听器设置成功');
	 }
	 
	 function onclick3(){
		 document.getElementById('button2').addEventListener('click',onclick2);
	 }
	 function onclick4(){
		 		 document.getElementById('button2').removeEventListener('click',onclick2);
	 }
	 
	</script>
</html>
